<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>歌手歌曲</title>
  <link rel="stylesheet" href="../css/index_1.css">
  <link rel="stylesheet" href="../css/base.css">
  <style>
    .singer-detail {
      width: 1200px;
      height: 500px;
      margin: 0 auto;
    }
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    table {
      width: 80%;
      margin: 0 auto;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ccc;
    }
    th {
      background-color: #f2f2f2;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    td a {
      margin: 0 30px;
    }
    a:hover {
      color: #0056b3;
    }
    .singer-name {
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="wrapper">
        <div class="logo">
            <a href="#"></a>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="home.html">首页</a>
                </li>
                <li>
                    <a href="musictype.html">分类查询</a>
                </li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="请输入关键字">
            <a href="#"></a>
        </div>
        <div class="user">
            <a href="#">
                <img src="./uploads/user.png" alt="#">
                <span>卖报的小行家</span>
            </a>
        </div>
    </div>
  </div>
  <div class="singer-name">
  </div>
  <div class="singer-detail">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>歌曲名</th>
          <th>专辑名</th>
          <th>欣赏模式</th>
        </tr>
      </thead>
      <tbody id="songTableBody">
      </tbody>
    </table>
  </div>
  <div class="footer">
    <div class="wrapper">
        <div class="left">
            <a href="#">
                <img src="../images/log.png" alt="">
            </a>
            <p>
                这是一个练习型的网站，就是分享作者的一些音乐分享。
                音乐肯定是不全的，后续可以继续加内容。
                如果有什么建议，可以点击下面按钮，给我留言。
                若有违规音乐，请给我留言，届时下架。
            </p>
            <a href="message.html" class="give-me-advise">给我留言</a>
        </div>
        <div class="right">
            <dl>
                <dt>合作伙伴</dt>
                <dd><a href="#">就我一个</a></dd>
                <dd><a href="#">就我一个</a></dd>
            </dl>
        </div>
    </div>
</div>
  <script src="../js/axios.min.js"></script>
  <script>
    const urlParams = new URLSearchParams(window.location.search);
    const singer = decodeURIComponent(urlParams.get('name'));
    const singerName = document.querySelector(".singer-name")
    singerName.innerHTML=`<h2>${singer}</h2>`
    axios({
      url:`http://localhost:8080/song?singer=${singer}`,
      method:"get"
    }).then(result => {
      console.log(result.data.data);
      const songData = result.data.data
      const tbody = document.getElementById('songTableBody');
      let index = 1
      songData.forEach((song) => {
        const row = document.createElement('tr');
        const indexCell = document.createElement('td');
        const nameCell = document.createElement('td');
        const albumCell = document.createElement('td');
        const videoCell = document.createElement('td');
        indexCell.textContent = index;
        albumCell.textContent = `《${song.album}》`
        nameCell.textContent = song.name;
        videoCell.innerHTML = `<a href="shiping.html?name=${song.name}&album=${song.album}" target="_blank">视频欣赏</a><a href="yinping.html?name=${song.name}&album=${song.album}" target="_blank">音乐欣赏</a>`;

        row.appendChild(indexCell);
        row.appendChild(nameCell);
        row.appendChild(albumCell);
        row.appendChild(videoCell);
        tbody.appendChild(row);

        index++
      })
  })

  const storedUsername = localStorage.getItem('username');
  const storedImage = localStorage.getItem('imageFile');
  const imgElement = document.querySelector('.user img');
  imgElement.src = storedImage;
  const spanElement = document.querySelector('.user span');
  spanElement.textContent = storedUsername;
  
  </script>
</body>
</html>